<template>
	<s-layout title="移除群成员" :bgStyle="{
		color:'#F6F6F6'
	}">
	<view class="search-box ss-p-y-32 ss-flex justify-center align-center" :style="{
      top: sheep.$platform.device.statusBarHeight + 44 + 'px',
    }">
		<view class="search ss-p-x-20 ss-flex align-center">
			<uni-icons type="search" size="20" color="#999999"></uni-icons>
			<input class="ss-m-l-10" type="text" placeholder="搜索" placeholder-style="color:#6F7279;" />
		</view>
	</view>
	<view class="user-list ss-flex flex-wrap align-start ss-p-l-28 ss-p-r-18" :style="{
      top: sheep.$platform.device.statusBarHeight + state.height + 44 + 'px',
    }">
		<image class="user-image" v-for="(item,index) in userList" :src="cdn(item.avatar)" mode="aspectFill" :key="index"></image>
	</view>
	<view :style="{
			width:'100%',
	  height: state.height2 + state.height +'px',
	}"></view>
	<view class="list ss-m-t-20">
		<view class="item ss-flex ss-p-l-30" v-for="(item,index) in deleteUserList" :key="index" @click="change(item)">
			<view class="left">
				<uni-icons type="checkbox-filled" size="28" color="#FF5C02" v-if="isUser(item)"></uni-icons>
				<uni-icons type="circle" size="28" color="#979797" v-else></uni-icons>
			</view>
			<view class="right ss-flex">
				<image class="right-image ss-m-r-24" :src="cdn(item.avatar)" mode="aspectFill"></image>
				<view class="right-text">{{item.nickname}}</view>
			</view>
		</view>
	</view>
	<view style="height: 200rpx;width: 1rpx;"></view>
	<view class="bottom-box ss-safe-bottom">
		<view class="ss-p-y-30 ss-flex justify-center">
			<view class="btn" @click="submit">完成</view>
		</view>
	</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
		cdn,
		udid
	} from '@/im/config/index.js'
	import $store from '@/im/store/im';
	import imApi from '@/im/api/index.js'
	
	const groupInfo = computed(() => $store().groupInfo);
	const iMMyInfo = computed(() => $store().userInfo);
	
	const deleteUserList = ref([])
	const userList = ref([])
	
	const state = reactive({
		height: uni.upx2px(136),
		height2: uni.upx2px(204)
	})
	
	onLoad(()=>{
		getMember()
	})
	
	const submit = async () => {
		let ids = userList.value.map(item => {
			return item.im_id
		})
		const {code} = await imApi.deleteMember({
			group_id:groupInfo.value.groupProfile.groupID,
			type:udid === 'hotel' ? 'hl' : udid,
			im_id_arr:ids,
			im_id:iMMyInfo.value.userID
		})
		
		if (code === 0) {
			uni.showToast({
				title: '删除成功',
				icon: 'none',
				duration: 1500,
				success() {
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			})
		}
	}
	
	const isUser = (item) => {
		const index = userList.value.findIndex(e => {
			return e.im_id === item.im_id
		})
		return index === -1 ? false : true
	}
	
	const change = (item) => {
		const index = userList.value.findIndex(e => {
			return e.im_id === item.im_id
		})
		if (index === -1) {
			userList.value.push(item)
		} else {
			userList.value.splice(index, 1)
		}
	}
	
	const getMember = async () => {
		const {
			code,
			data
		} = await imApi.memberList({
			type: udid === 'hotel' ? 'hl' : udid,
			group_id: groupInfo.value.groupProfile.groupID,
		})
		if (code === 0) {
			deleteUserList.value = data.filter(item => {
				// 本人和群主不在删除范围 需要去除
				return item.im_id !== iMMyInfo.value.userID && item.identifier !== 1
			})
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	
	.search-box {
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		.search {
			width: 704rpx;
			height: 72rpx;
			background: #F1F1F1;
			border-radius: 8rpx;
			
			input {
				flex: 1;
				height: 72rpx;
				font-weight: 350;
				font-size: 28rpx;
				line-height: 72rpx;
			}
		}
	}
	.user-list {
		width: 100%;
		height: 204rpx;
		background-color: #fff;
		overflow-y: scroll;
		position: fixed;
		top: 136rpx;
		left: 0;
		z-index: 999;

		.user-image {
			width: 76rpx;
			height: 76rpx;
			border-radius: 6rpx;
			margin-right: 10rpx;
			margin-bottom: 16rpx;
		}
	}
	
	.list {
		background-color: #fff;
		.item {
			width: 100%;
			height: 116rpx;
			
			.left {
				margin-right: 28rpx;
				.not {
					width: 48rpx;
					height: 48rpx;
					border: 2rpx solid #979797;
					border-radius: 50%;
				}
			}
			
			.right {
				flex: 1;
				height: 116rpx;
				border-bottom: 1rpx solid #F1F1F1;
				
				.right-image {
					width: 76rpx;
					height: 76rpx;
					border-radius: 6rpx;
				}
				
				.right-name {
					font-weight: 350;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
	
	
	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		background-color: #fff;
		
		.btn {
			width: 710rpx;
			height: 84rpx;
			background: #FF5C02;
			border-radius: 40rpx;
			font-weight: 350;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
		}
	}
</style>